<template>
	<view class="container">
		<view class="tit">
			支付方式
		</view>

		<view class="list">
			<view class="list_item">
				<view class="item_l">
					<!-- #ifdef MP-WEIXIN -->
					<image src="/static/img/detail/weixin-select.png" mode="widthFix"></image>
					<text>微信支付</text>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<image src="/static/img/detail/apily-select.png" mode="widthFix"></image>
					<text>支付宝支付</text>
					<!-- #endif -->
				</view>
				<label class="radio">
					<radio value="1" color="#42b8ff" checked="true" />
				</label>
			</view>
		</view>

		<view class="money">
			<view class="num" :class="{'active': active ==index}" v-for="(item,index) in money" :key='item.id' @click="num(index)">
				<text>{{item.title}}元</text>
			</view>
		</view>

		<button type="default" @click="pay">确认</button>
	</view>
</template>

<script>
	import {
		recharge
	} from '../../../api/api.js'
	export default {
		data() {
			return {
				money: [{
						title: 10,
						id: 1
					},
					{
						title: 15,
						id: 2
					},
					{
						title: 20,
						id: 3
					},
					{
						title: 30,
						id: 4
					},
					{
						title: 50,
						id: 5
					},
					{
						title: 100,
						id: 6
					}
				],
				active: 0
			}
		},
		methods: {
			num(index) {
				this.active = index
			},
			pay() {
				uni.showLoading({
					mask:true,
					title:"支付中..."
				})
				recharge({
					// #ifdef MP-WEIXIN
					'pay_type': 0,
					// #endif
					// #ifdef MP-ALIPAY
					'pay_type': 1,
					// #endif
					pay_money: this.money[this.active].title
				}).then(res => {
					// #ifdef MP-WEIXIN
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
							uni.navigateTo({
								url: '/pages/common/success'
							})
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
							uni.navigateTo({
								url: '/pages/common/fail'
							})
						},
						complete: () => {
							
							uni.hideLoading()
						}
					});
					// #endif
					// #ifdef MP-ALIPAY
					uni.requestPayment({
						provider: 'alipay',
						orderInfo: res.data.trade_no, //微信、支付宝订单数据
						success: function(res) {
							console.log(JSON.stringify(res));
							if(res.resultCode == 9000){
								uni.navigateTo({
									url:'/pages/common/success'
								})
							}else{
								uni.navigateTo({
									url:'/pages/common/fail'
								})
							}
						},
						fail: function(err) {
							console.log(22222222222)
							console.log('fail:' + JSON.stringify(err));
						},
						complete: () => {
							
							uni.hideLoading()
						}
					});
					// #endif
				})

				// uni.navigateTo({
				// 	url: '/pages/common/success'
				// })
			}
		},
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background-color: #f6f6f6;
	}

	.tit {
		height: 60upx;
		line-height: 60upx;
		margin-left: 30upx;
		color: #999999;
		font-size: 24upx;
	}

	.list {
		width: 100%;
		background-color: #FFFFFF;

		.list_item {
			width: calc(100% - 60upx);
			height: 100upx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1upx solid #ececee;

			.item_l {
				min-width: 100upx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 30upx;
					margin-right: 15upx;
				}
			}

			.radio {
				transform: scale(0.8);
			}
		}
	}

	.money {
		width: 100%;
		padding: 30upx 0;
		margin-top: 30upx;
		background-color: #FFFFFF;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;

		.num {
			width: 26%;
			height: 100upx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #f6f5f8;
			color: #7e7b7e;
			font-size: 32upx;
			margin-bottom: 20upx;
			border-radius: 10upx;
		}

		.active {
			background-color: #3eb8ff;
			color: #FFFFFF;
		}

	}

	button {
		width: 90%;
		height: 90upx;
		background-color: #3eb8ff;
		border-radius: 45upx;
		margin: 60upx auto;
		line-height: 90upx;
		color: #FFFFFF;
	}
</style>
